<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    <!-- <router-view></router-view> -->
    <van-tabbar
      bind:change="onChange"
      :placeholder= "true"
      :route= "true"
    >
      <van-tabbar-item icon="home-o" to="/home">
        <span>首页</span>
        <template #icon="props" >
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="search" to="/search">搜索</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/mine">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// import {NavBar, Button, Col, Row, Tabbar, TabbarItem,Swipe, SwipeItem } from 'vant';

export default {
  name: "App",
  data() {
    return {
      active: 0,
      icon: {
        active: require("./assets/main.png"),
        inactive: require("./assets/main.png"),
      },
    };
  },
      mounted() {
    },

  methods: {
    onChange(index) {
      switch (index) {
        case 0:
          this.$router.push("/home");
          break;
        case 1:
          this.$router.push("/search");
          break;
        case 2:
          this.$router.push("/mine");
          break;
        default:
          this.$router.push("/home");
      }
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>


